<template>
  <div ref="refChart" :style="{ height: kHOne + 'px'}"></div>
</template>

<script>
import theme from '../assets/theme/theme'
import {getComplexJson} from '../api'

export default {
  name: 'ChartFive',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartFive;
    }
  },
  data() {
    return {
      chartInstance: null,
      allData1: [],
      allData2: [],
      allData3: [],
      allData4: [],
      kHOne: null,
      // 自适应浏览器获取宽高大小定时器
      screenTimer: null,
      // 局部刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHOne = Math.round(this.screenHeight * 0.46)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 自适应浏览器获取宽高大小定时器
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取接口数据
    this.getData();
    // 调用Echarts图表自适应方法
    this.screenAdapter();
    // Echarts图表自适应
    window.addEventListener("resize", this.screenAdapter);
    // 局部刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
    // Echarts图表自适应销毁
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 自适应浏览器获取宽高大小定时器
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      this.kHOne = Math.round(this.screenHeight * 0.46);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.refChart, theme);
      const initOption = {
        title: {
          text: "银行机构客户信息核查情况统计表",
          left: 'center'
        },
        legend: {
          top: '5%',
          right: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '12%',
          left: '1%',
          right: '3%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
          },
          {
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              // 聚焦当前高亮的数据所在的系列的所有图形
              focus: 'series'
            },
          },
          {
            type: 'line',
            // stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
          }
        ]
      };
      // 图表初始化配置
      this.chartInstance.setOption(initOption);
    },
    getData() {
      getComplexJson().then(res => {
        // 先进行置空
        this.allData1 = [];
        this.allData2 = [];
        this.allData3 = [];
        this.allData4 = [];
        let num1 = res.chartFive.num1;
        let num2 = res.chartFive.num2;
        let num3 = res.chartFive.num3;
        let num4 = res.chartFive.num4;
        let num5 = res.chartFive.num5;
        let num6 = res.chartFive.num6;
        let num7 = res.chartFive.num7;
        let num8 = res.chartFive.num8;
        let num9 = res.chartFive.num9;
        let num10 = res.chartFive.num10;
        let num11 = res.chartFive.num11;
        let num12 = res.chartFive.num12;

        let xnum1 = res.chartFive.num13;
        let xnum2 = res.chartFive.num14;
        let xnum3 = res.chartFive.num15;
        let xnum4 = res.chartFive.num16;
        let xnum5 = res.chartFive.num17;
        let xnum6 = res.chartFive.num18;
        let xnum7 = res.chartFive.num19;
        let xnum8 = res.chartFive.num20;
        let xnum9 = res.chartFive.num21;
        let xnum10 = res.chartFive.num22;
        let xnum11 = res.chartFive.num23;
        let xnum12 = res.chartFive.num24;

        let ynum1 = res.chartFive.num25;
        let ynum2 = res.chartFive.num26;
        let ynum3 = res.chartFive.num27;
        let ynum4 = res.chartFive.num28;
        let ynum5 = res.chartFive.num29;
        let ynum6 = res.chartFive.num30;
        let ynum7 = res.chartFive.num31;
        let ynum8 = res.chartFive.num32;
        let ynum9 = res.chartFive.num33;
        let ynum10 = res.chartFive.num34;
        let ynum11 = res.chartFive.num35;
        let ynum12 = res.chartFive.num36;

        this.allData1.push(num1, num2, num3, num4, num5);
        this.allData2.push(xnum1, xnum2, xnum3, xnum4, xnum5);
        this.allData3.push(ynum1, ynum2, ynum3, ynum4, ynum5);
        this.allData4.push(ynum6, ynum7, ynum8, ynum9, ynum10)
        this.updateChart();
      })
    },
    updateChart() {
      // 处理图表需要的数据
      const dataOption = {
        legend: {
          data: ['发起实时核查请求数量', '实时核查结果反馈数量', '可疑线索报送数量', '可疑线索撤销数量']
        },
        xAxis: [
          {
            data: ['工商银行', '建设银行', '交通银行', '中国银行', '农业银行']
          }
        ],
        series: [
          {
            name: '发起实时核查请求数量',
            data: this.allData1
          },
          {
            name: '实时核查结果反馈数量',
            data: this.allData2
          },
          {
            name: '可疑线索报送数量',
            data: this.allData3
          },
          {
            name: '可疑线索撤销数量',
            data: this.allData4
          }
        ]
      };
      // 图表数据变化配置
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      this.titleFontSize = Math.round(this.$refs.refChart.offsetWidth / 30);
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        xAxis: {
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
        yAxis: {
          //  改变y轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
      };
      // 图表自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        this.getData();
      }, 5000)
    }
  }
}
</script>
